<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin: 0;padding:0;}
    .cont{width: 1000px;overflow: hidden;}
    .cont .box{float: left;border: solid 1px black;width: 250px;box-sizing: border-box;text-align: center;}
    .cont .box img{width: 70%;height:150px}
    .cont .box p{line-height: 20px;height:40px;overflow: hidden;}

    .pageBox{width:100%;display: flex;justify-content: center;}
    .pageBox ul{display: flex;margin:0;padding:0;list-style: none;}
    .pageBox li{width: 22px;text-align: center;line-height: 30px;height: 30px;margin: 0 4px;cursor: pointer;}
    .pageBox li:hover{color: #55f;}
    .pageBox li.active{color: #00f;text-decoration:underline;}
  </style>
</head>
<body>
  <div class="cont"></div>
  <div class="pageBox">
    <input type="button" value="上一页" class="prev">
    <ul class="page">
    </ul>
    <input type="button" value="下一页" class="next">
  </div>
</body>
<script src="./ajax.js"></script>
<script>
  
  class Page{
    constructor(){
      this.url = "http://10.11.50.46:3000/getgoods";
      this.cont = document.querySelector(".cont");
      this.pageCont = document.querySelector(".page");
      this.prev = document.querySelector(".prev");
      this.next = document.querySelector(".next");
      this.num = 8;
      this.index = 10;
      
      // 1. 获取数据
      this.getData();
      // 5. 绑定事件
      this.addEvent();
    }
    addEvent(){
      const that = this;
      this.prev.onclick = function(){
        // 6.1 清除页码高亮，计算索引，设置新页码高亮，重新渲染页面
        that.prevHandle()
      }
      this.next.onclick = function(){
        // 6.2 清除页码高亮，计算索引，设置新页码高亮，重新渲染页面
        that.nextHandle();
      }
      this.pageCont.onclick = function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.tagName === "LI"){
          // 点击分页器时，获取点击项的索引并准备改变页码索引
          that.changePage(target.dataset.index-0);
        }
      }
    }
    changePage(index){
      // 清除页码高亮
      this.li[this.index].className = "";
      // 改变索引
      this.index = index;
      // 设置新页码高亮
      this.li[this.index].className = "active";
      // 重新渲染页面
      this.render();
    }
    prevHandle(){
      // 清除页码高亮
      this.li[this.index].className = ""
      // 计算索引
      if(this.index === 0){
        this.index = 0
      }else{
        this.index--;
      }
      // 设置新页码高亮
      this.li[this.index].className = "active";
      // 重新渲染页面
      this.render();
    }
    nextHandle(){
      this.li[this.index].className = ""
      if(this.index === this.li.length-1){
        this.index = this.li.length-1;
      }else{
        this.index++;
      }
      this.li[this.index].className = "active";
      this.render();
    }
    getData(){
      ajax({
        url: this.url,
        success:res=>{
          // 2. 解析数据
          this.res = JSON.parse(res).data;
          // 3. 渲染页面
          this.render();
          // 4. 计算页码，并渲染页码
          this.page();
        }
      })
    }
    page(){
      // 计算页码：向上取整(总数量 / 当页条数)
      this.maxPage = Math.ceil(this.res.length / this.num);
      console.log(this.maxPage);
      let str = ""
      // 渲染页码
      for(let i=0;i<this.maxPage;i++){
        str += `<li data-index="${i}">${ i+1 }</li>`;
      }
      this.pageCont.innerHTML = str;
      // 获取每个页码元素
      this.li = this.pageCont.children;
      // 给默认选中的页码，添加高亮
      this.li[this.index].className = "active";
    }
    render(){
      let str = '';
      // 分页公式
      // 0:0~8      0*8 ~ 0*8+8
      // 1:8~16     1*8 ~ 1*8+8
      // 2:16~24    2*8 ~ 2*8+8
      // ...
      // 184~192
      // this.index*this.num ~ this.index*this.num+this.num
      // 根据分页公式，渲染页面
      for(let i=this.index*this.num; i<this.index*this.num+this.num; i++){
        if( i < this.res.length){
          const val = this.res[i];
          str += `<div class="box">
                  <img src="${val.goodsImg}" alt="">
                  <p>${i}-${val.goodsName}</p>
                  <p>${val.price}</p>
                  <input type="button" value="加购物车" data-id="${val.goodsId}">
                </div>`;
        }
      }

      this.cont.innerHTML = str
    }
  }

  new Page();

  
</script>
</html>